<template>
  <div>
    <div slot="title" class="header-title">
      <span class="title-name">小区</span>
      <span class="title-content">{{ baseform.community }}</span>
      <span class="title-name">单元-门牌</span>
      <span class="title-content">{{ baseform.room }}</span>
    </div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1" class="title" :class="{'active':'1'== activeIndex}">房屋基本信息</el-menu-item>
      <el-menu-item index="2" class="title" :class="{'active':'2'== activeIndex}">房主信息</el-menu-item>
      <el-menu-item index="3" class="title" :class="{'active':'3'== activeIndex}">二房东信息</el-menu-item>
      <el-menu-item index="4" class="title" :class="{'active':'4'== activeIndex}">自住人员(3人)</el-menu-item>
      <el-menu-item index="5" class="title" :class="{'active':'5'== activeIndex}">租住人员(3人)</el-menu-item>
      <el-menu-item index="6" class="title" :class="{'active':'6'== activeIndex}">历史居住(3人)</el-menu-item>
    </el-menu>
    <div class="dialog_content">
      <div class="content">
        <div v-show="activeIndex=='1'">
          <div>
            <el-form ref="form" :model="baseform">
              <el-row>
                <el-col :span="10">
                  <el-form-item label="房主" class="label">
                    <el-input v-model="baseform.name" class="input"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10" :offset="4">
                  <el-form-item label="房主电话" class="label">
                    <el-input v-model="baseform.phone" class="input"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="10">
                  <el-form-item label="代理人" class="label">
                    <el-input v-model="baseform.apply" class="input"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10" :offset="4">
                  <el-form-item label="代理人电话" class="label">
                    <el-input v-model="baseform.applyphone" class="input"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="10">
                  <el-form-item label="面积" class="label">
                    <el-input v-model="baseform.area" class="input"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10" :offset="4">
                  <el-form-item label="居住类型" class="label">
                    <el-input v-model="baseform.livetype" class="input"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="10">
                  <el-form-item label="总楼层" class="label">
                    <el-input v-model="baseform.floor" class="input"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10" :offset="4">
                  <el-form-item label="每层户数" class="label">
                    <el-input v-model="baseform.floornum" class="input"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="label" style="font-weight:500;margin-bottom:10px;">房屋标签</div>
                  <div
                    style="border-radius: 4px;border: 1px solid #dcdfe6;display:flex;justify-content: space-between;align-items: center;"
                  >
                    <div>
                      <el-tag type="warning">未交物业费</el-tag>
                    </div>
                    <!-- <div><el-button type="text" @click="handleinner">编辑</el-button></div> -->
                  </div>
                </el-col>
              </el-row>
              <el-row style="margin-top:20px;">
                <el-col :span="10">
                  <div class="label" style="font-weight:500;margin-bottom:10px;">户型图</div>
                  <el-image
                    @click="showImg(url)"
                    style="width: 200px; height: 200px"
                    :src="url"
                    :fit="fit"
                  ></el-image>
                </el-col>
                <!-- <el-col :span="10" :offset="4">
              <div class="label" style="font-weight:500;margin-bottom:10px;">证件图片</div>
                <el-image
                    style="width: 100px; height: 100px"
                    :src="url"
                    :fit="fit"></el-image>
                </el-col>-->
              </el-row>
            </el-form>
          </div>
        </div>

        <div v-show="activeIndex=='2'">
          <el-table
            :data="fangzhudata"
            :header-cell-style="{background: '#EBECF0',height:'44px',color:'#000000'}"
            :cell-style="{background: '#ffffff',height:'44px',color:'#000000'}"
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column label="序号" type="index" :index="indexMethod" width="100"></el-table-column>
            <el-table-column property="name" width="130" label="姓名"></el-table-column>
            <el-table-column property="产权人" width="130" label="类型"></el-table-column>
            <el-table-column property="idNum" width="200" label="身份证号"></el-table-column>
            <el-table-column property="phone" width="180" label="电话"></el-table-column>
            <el-table-column property="time" width="180" label="数据最后修改时间"></el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <div class="related">
                  <img src="../../assets/一房一档slices/微信图片_20201207092659.png" alt class="record" />
                  <div>{{scope.row.name}}</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              :current-page.sync="fangzhu.page"
              background
              :page-sizes="[10, 20, 30, 40]"
              layout="total, prev, pager, next, jumper"
              :total="fangzhu.total"
              @current-change="handleCurrentChange(...arguments,'fangzhu')"
            />
          </div>
        </div>

        <div v-show="activeIndex=='3'">
          <el-table
            :data="erfangdongdata"
            :header-cell-style="{background: '#EBECF0',height:'44px',color:'#000000'}"
            :cell-style="{background: '#ffffff',height:'44px',color:'#000000'}"
            highlight-current-row
            style="width:1100px;margin-left: calc(100vh - 970px);"
          >
            <el-table-column label="序号" type="index" :index="indexMethod" width="100"></el-table-column>
            <el-table-column property="name" width="180" label="姓名"></el-table-column>
            <el-table-column property="idNum" width="200" label="身份证号"></el-table-column>
            <el-table-column property="phone" width="180" label="电话"></el-table-column>
            <el-table-column property="time" label="最后修改时间" width="200"></el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <div class="related">
                  <img src="../../assets/一房一档slices/微信图片_20201207092659.png" alt class="record" />
                  <div>{{scope.row.name}}</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              :current-page.sync="erfangdong.page"
              background
              :page-sizes="[10, 20, 30, 40]"
              layout="total, prev, pager, next, jumper"
              :total="erfangdong.total"
              @current-change="handleCurrentChange(...arguments,'erfangzhu')"
            />
          </div>
        </div>

        <div v-show="activeIndex=='4'">
          <div style="margin:0 auto;">
            <el-table
              :data="zizhudata"
              :header-cell-style="{background: '#EBECF0',height:'44px',color:'#000000'}"
              :cell-style="{background: '#ffffff',height:'44px',color:'#000000'}"
              highlight-current-row
              style="width:900px;margin-left: calc(100vh - 850px);"
            >
              <el-table-column label="序号" type="index" :index="indexMethod" width="100"></el-table-column>
              <el-table-column property="name" width="180" label="姓名"></el-table-column>
              <el-table-column property="idNum" width="200" label="身份证号"></el-table-column>
              <el-table-column property="phone" width="180" label="电话"></el-table-column>
              <el-table-column property="time" label="最后修改时间" width="200"></el-table-column>
            </el-table>
          </div>
          <div class="pagination">
            <el-pagination
              :current-page.sync="zizhu.page"
              background
              :page-sizes="[10, 20, 30, 40]"
              layout="total, prev, pager, next, jumper"
              :total="zizhu.total"
              @current-change="handleCurrentChange(...arguments,'zizhu')"
            />
          </div>
        </div>

        <div v-show="activeIndex=='5'">
          <el-table
            :data="zuzhudata"
            :header-cell-style="{background: '#EBECF0',height:'44px',color:'#000000'}"
            :cell-style="{background: '#ffffff',height:'44px',color:'#000000'}"
            highlight-current-row
            style="width:900px;margin-left: calc(100vh - 850px);"
          >
            <el-table-column label="序号" type="index" :index="indexMethod" width="100"></el-table-column>
            <el-table-column property="name" width="180" label="姓名"></el-table-column>
            <el-table-column property="idNum" width="200" label="身份证号"></el-table-column>
            <el-table-column property="phone" width="180" label="电话"></el-table-column>
            <el-table-column property="time" label="最后修改时间" width="200"></el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              :current-page.sync="zuzhu.page"
              background
              :page-sizes="[10, 20, 30, 40]"
              layout="total, prev, pager, next, jumper"
              :total="zuzhu.total"
              @current-change="handleCurrentChange(...arguments,'zuzhu')"
            />
          </div>
        </div>

        <div v-show="activeIndex=='6'">
          <el-table
            :data="historydata"
            :header-cell-style="{background: '#EBECF0',height:'44px',color:'#000000'}"
            :cell-style="{background: '#ffffff',height:'44px',color:'#000000'}"
            highlight-current-row
            style="width:1100px;margin-left: calc(100vh - 970px);"
          >
            <el-table-column label="序号" type="index" :index="indexMethod" width="100"></el-table-column>
            <el-table-column property="name" width="180" label="姓名"></el-table-column>
            <el-table-column property="idNum" width="200" label="身份证号"></el-table-column>
            <el-table-column property="phone" width="180" label="电话"></el-table-column>
            <el-table-column property="history" width="180" label="居住类型"></el-table-column>
            <el-table-column property="time" label="最后修改时间" width="200"></el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              :current-page.sync="history.page"
              background
              :page-sizes="[10, 20, 30, 40]"
              layout="total, prev, pager, next, jumper"
              :total="history.total"
              @current-change="handleCurrentChange(...arguments,'history')"
            />
          </div>
        </div>
      </div>
      <!-- 图片放大 -->
      <img-dialog v-if="isShownimg" :img="chooseImg" @closeImg="closeImg" />
    </div>
  </div>
</template>
<script>
import ImgDialog from "@/components/Imgdialog";
export default {
  props: {},
  components: {
    ImgDialog
  },
  data() {
    return {
      activeIndex: "1",
      baseform: {
        community: "新丰苑三期",
        room: "2-1201",
        name: "王一博",
        phone: "17388880909",
        apply: "周阳",
        applyphone: "17388880909",
        area: "110",
        floor: "20",
        floornum: "4",
        livetype: "租住",
        tags: [{ type: "warnging", title: "未交物业费" }],
        pic: ""
      },
      houseform: {},
      carform: {},
      guijiform: {},
      innerVisible: false,
      isgraph: false,
      isShownimg: false,
      chooseImg: null,
      tags: [
        { type: "", name: "退伍军人", show: true },
        { name: "标签二", type: "success", show: false },
        { name: "标签三", type: "info", show: false },
        { name: "标签四", type: "warning", show: true },
        { name: "标签五", type: "danger", show: false },
        { type: "", name: "退伍军人", show: true },
        { name: "标签二", type: "success", show: false },
        { name: "标签三", type: "info", show: false },
        { name: "标签四", type: "warning", show: false }
      ],
      gou: require("@/assets/slice/gou.jpg"),
      url:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      fangzhudata: [
        {
          name: "取消人房关联",
          type: "产权人",
          time: "2020-10-23 12:23:23",
          phone: "13289773217",
          idNum: "320830199103121231"
        },
        {
          name: "取消人房关联",
          type: "产权人",
          time: "2020-10-23 12:23:23",
          phone: "13289773217",
          idNum: "320830199103121231"
        },
        {
          name: "取消人房关联",
          type: "产权人",
          time: "2020-10-23 12:23:23",
          phone: "13289773217",
          idNum: "320830199103121231"
        }
      ],
      erfangdongdata: [
        {
          name: "取消人房关联",
          time: "2020-10-23 12:23:23",
          phone: "13289773217",
          idNum: "320830199103121231"
        },
        {
          name: "取消人房关联",
          time: "2020-10-23 12:23:23",
          phone: "13289773217",
          idNum: "320830199103121231"
        },
        {
          name: "取消人房关联",
          time: "2020-10-23 12:23:23",
          phone: "13289773217",
          idNum: "320830199103121231"
        }
      ],
      zizhudata: [
        {
          name: "张扬阳",
          time: "2020-10-23 12:23:23",
          phone: "13289773217",
          idNum: "320830199103121231"
        },
        {
          name: "张扬阳",
          time: "2020-10-23 12:23:23",
          phone: "13289773217",
          idNum: "320830199103121231"
        },
        {
          name: "张扬阳",
          time: "2020-10-23 12:23:23",
          phone: "13289773217",
          idNum: "320830199103121231"
        }
      ],
      zuzhudata: [
        {
          name: "张扬阳",
          time: "2020-10-23 12:23:23",
          phone: "13289773217",
          idNum: "320830199103121231"
        },
        {
          name: "张扬阳",
          time: "2020-10-23 12:23:23",
          phone: "13289773217",
          idNum: "320830199103121231"
        },
        {
          name: "张扬阳",
          time: "2020-10-23 12:23:23",
          phone: "13289773217",
          idNum: "320830199103121231"
        }
      ],
      historydata: [
        {
          name: "张扬阳",
          time: "2020-10-23 12:23:23",
          type: "自住",
          phone: "13289773217",
          idNum: "320830199103121231"
        },
        {
          name: "张扬阳",
          time: "2020-10-23 12:23:23",
          type: "自住",
          phone: "13289773217",
          idNum: "320830199103121231"
        },
        {
          name: "张扬阳",
          time: "2020-10-23 12:23:23",
          type: "自住",
          phone: "13289773217",
          idNum: "320830199103121231"
        }
      ],
      fangzhu: {
        total: 100,
        page: 10
      },
      erfangdong: {
        total: 100,
        page: 10
      },
      zizhu: {
        total: 100,
        page: 10
      },
      zuzhu: {
        total: 100,
        page: 10
      },
      history: {
        total: 100,
        page: 10
      },
      total: 100,
      page: 10
    };
  },
  mounted() {},
  methods: {
    handleSelect(index) {
      this.activeIndex = index;
    },
    handleinner() {
      this.innerVisible = true;
    },
    isShow(tag, i) {
      this.tags[i].show = !this.tags[i].show;
      console.log(tag, i);
    },
    showImg(img) {
      this.isShownimg = true;
      this.chooseImg = img;
    },
    closeImg() {
      this.isShownimg = false;
    },
    showEcharts() {
      this.isgraph = true;
    },
    handleCurrentChange(n, type) {
      console.log(n, type);
    }
  }
};
</script>
<style lang="scss" scoped>
.dialog_content {
  .content {
    padding-top: 40px;
  }

  .input {
    width: 346px;
  }
  .label {
    display: block;
    text-align: left;
    margin-right: 20px;
    color: #666666;
    font-size: 14px;
    width: 100%;
  }
}
.pagination {
  text-align: right;
  margin: 30px 0;
}
.select_tag {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 15px;
  background-repeat: no-repeat;
}

.img {
  width: 50px;
  height: 34px;
}

.title {
  font-size: 1rem;
  font-weight: 500;
}
.active {
  color: #0476ff !important;
}
.el-menu-demo {
  padding-left: 50px;
  padding-top: 30px;
}
.header-title {
  font-size: 0.8rem;
  height: 50px;
  border-bottom: 1px dashed #dcdee3;
  padding-left: 30px;

  .title-name {
    font-weight: 500;
    margin-left: 20px;
    margin-right: 10px;
  }
  .title-content {
    border: 1px solid #dcdee3;
    padding: 5px;
  }
}

.related {
  position: relative;
  padding: 0 24px;
  border: 1px solid #0476ff;
  width: 140px;
  height: 20px;
  color: #0476ff;
  .record {
    position: absolute;
    top: 17%;
    left: 5%;
  }
}


</style>
<style lang="scss">
.input .el-input__inner {
  height: 28px !important;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 3px solid #0476ff !important;
}

/* .content{
  .el-form-item__label{
    display: block !important;
    text-align: left !important;
    width: 100% !important;
  }
} */
.el-form-item__label {
  display: block !important;
  text-align: left !important;
  width: 100% !important;
}
.content_scroll {
  overflow-y: scroll;
  overflow-x: hidden;
}
.content_scroll::-webkit-scrollbar {
  width: 10px;
}
.content_scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
.content_scroll::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
</style>
